<template>
  <div class="app-container">
    <!-- 画布核心组件（成员B开发） -->
    <CanvasContainer />
    <!-- 浮动工具栏（成员E开发） -->
    <FloatingToolbar />
    <!-- 富文本编辑弹窗（成员C开发） -->
    <TextEditor />
  </div>
</template>

<script setup lang="ts">
// 导入组件（占位组件，后续成员开发后自动生效）
import CanvasContainer from '@/components/Canvas/CanvasContainer.vue'
import FloatingToolbar from '@/components/Toolbar/FloatingToolbar.vue'
import TextEditor from '@/components/Elements/TextEditor.vue'

// 初始化持久化（加载存储数据+自动保存）
import { useLoadStorage, useAutoSave } from '@/hooks/usePersistence'
useLoadStorage() // 页面加载时读取数据
useAutoSave() // 监听变化自动保存
</script>

<style scoped>
.app-container {
  width: 100vw; /* 占满屏幕宽度 */
  height: 100vh; /* 占满屏幕高度 */
  position: relative; /* 子组件绝对定位的父容器 */
}
</style>